<template>
	<div class="layout">
		<Form ref="vform" :model="vform" :label-width="100"  :rules="ruleValidate">
			<Row type="flex" :gutter="16">
				<Col :span=17>
					<Row type="flex">
						<Col :span="24">
							<FormItem label="模板名称" prop="title">
								<Input v-model="vform.title" placeholder="请填写模板名称"></Input>
							</FormItem>
							<FormItem label="使用范围" prop="range">
								<Select v-model="vform.range" >
									<Option v-for="(item,index) in rangeList" :value="item.value" :key="index">{{ item.label }}</Option>
								</Select>
							</FormItem>
							<FormItem label="使用限制" prop="classify">
								<Select v-model="vform.classify" >
									<Option v-for="(item,index) in channelList" :value="item.value" :key="index">{{ item.label }}</Option>
								</Select>
							</FormItem>
							<FormItem label="有效期天数" prop="expired_days">
								<Input v-model="vform.expired_days" placeholder="请填写有效期天数"  ></Input>
							</FormItem>
							<FormItem label="优惠券金额" prop="value">
								<Input v-model="vform.value" placeholder="请填写优惠券金额"  ></Input>
							</FormItem>
							<FormItem label="使用规则" prop="rule">
								<Input v-model="vform.rule" placeholder="请填写使用规则" type="textarea"></Input>
							</FormItem>
							<Row type="flex" justify="center" align="middle" class="code-row-bg">
								<Button type="info" @click="onSubmit()" >提交</Button>
							</Row>
						</Col>
					</Row>
				</Col>

			</Row>
		</Form>

	</div>
</template>
<script>
    // 引入子组件
    import hljs from 'highlight.js'
    import 'highlight.js/styles/vs2015.css'

    // quill编辑器的字体
    var fonts = ['SimSun', 'Microsoft-YaHei','Arial','Times-New-Roman','sans-serif'];
    var Font = Quill.import('formats/font');
    Font.whitelist = fonts; //将字体加入到白名单
    Quill.register(Font, true);

    import PictureSelector from '@/components/PictureSelector/PictureSelector.vue'
    import {mapState,mapGetters} from 'vuex'
    import {Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
    export default {
        name:'article-view',
        components: {Tag, Card, Page, Modal, PictureSelector, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
        data () {
            return {
                title:'添加',
                tabIndex:'name1',
                showPictureBox:false,
                spinShow:true,
                currentImag:'',
                currentImagvisible:false,
                ruleValidate: {
                    title: [
                        { required: true, message: '请填写模板名称', trigger: 'blur' }
                    ],
                    expired_days: [
                        { required: true, message: '请填写有效期天数', trigger: 'blur' }
                    ],
                    rule: [
                        { required: true, message: '请填写使用规则', trigger: 'change' }
                    ],
                    range: [
                        { required: true,  message: '请选择使用范围', trigger: 'change' }
                    ],
                    classify: [
                        { required: true,  message: '请选择使用限制', trigger: 'change' }
                    ],
                    value: [
                        { required: true, message: '请填写优惠券金额', trigger: 'blur' }
                    ],
                },
                vform:{
                    expired_days:0,
                    rule:'',
                    title:'',
                    classify:0,
                    range:0,
                    value:0
                },

                channelList: [
                    {value: "1",label: '不限'},
                    {value: "2",label: '只限通话'},
                    {value: "3",label: '只限文字'},
                ],
                rangeList: [
                    {value: "0",label: '所有倾听者'},
                ],
            }
        },
        methods:{
            init:function(){

            },
            onSubmit:function(){
                let self=this
                this.$refs.vform.validate((valid) => {
                    if (valid) {
                        self.$http.post("/v1/promotion/templates?token="+self.token,{'data':JSON.stringify(self.vform)})
                            .then(function(response){
                                if(200==response.data.status && 0==response.data.code)
                                {
                                    self.$Message.success('操作成功');
                                    self.$router.back(-1)
                                }else{
                                    self.$Message.error(response.data.message);
                                }
                            }).catch(function(error){
                            self.$Message.error(error.message);
                        })
                    }
                })


            },

        },
        created:function(){
        },
        mounted () {
            // this.init()
            this.setTitle(this.title)
        },
        activated:function(){
        },
        computed:{
            ...mapGetters(['token','menuIndex'])
            ,can_comment:{
                get(){return 1==this.vform.can_comment?true:false},
                set(val){if(val){this.vform.can_comment=1}else{this.vform.can_comment=0} }
            }
            ,is_visibility:{
                get(){return 1==this.vform.is_visibility?true:false},
                set(val){if(val){this.vform.is_visibility=1}else{this.vform.is_visibility=0} }
            }
            ,is_url:{
                get(){return 1==this.vform.is_url?true:false},
                set(val){if(val){this.vform.is_url=1}else{this.vform.is_url=0} }
            }
            ,isrecommend:{
                get(){
                    if(1==this.vform.flag){return true}
                    return false
                },
                set(val){if(val){this.vform.flag=1}else{this.vform.flag=0} }
            }
            ,istop:{
                get(){
                    if(2==this.vform.flag){return true}
                    return false
                },
                set(val){if(val){this.vform.flag=2}else{this.vform.flag=0} }
            }
        },
    }



</script>
<style lang="less" scoped>


	.thumbnail-wrapper{
		margin-bottom:15px;padding:5px;

		.btn-thumbnail{text-align: center;border: 1px dashed #eee;height: 100px;line-height: 100px;}
		.btn-thumbnail:hover{
			border: 1px dashed #5cadff;
			i{color:#5cadff;}
		}

		.upload-list-cover{
			display: none;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0,0,0,.5);
			text-align: center;
			i{
				color: #fff;
				font-size: 20px;
				cursor: pointer;
				margin: 0 2px;
				position:relative;
				top:35%;
			}
		}

		.img-wrapper{height:180px;background-size: cover;}
	}
	.thumbnail-wrapper:hover .upload-list-cover{
		display: block;
	}
</style>
